<!-- 审批审核管理-->
<template>
    <h2>审批审核管理</h2>
    <div style="display: flex;justify-content: ;">
      <!-- 下拉选择 -->
      <el-select v-model="value1" filterable placeholder="删除状态" style="margin-left: 10px" @change="change">
        <el-option v-for="item in tableopition4" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select  v-model="value2" filterable placeholder="企业分类" style="margin-left: 3%" @change="change">
        <el-option v-for="item2 in tableopition2" :key="item2" :label="item2" :value="item2" />
      </el-select>
      <el-select  v-model="value3" filterable placeholder="所属行业" style="margin-left: 3%" @change="change">
        <el-option v-for="item in tableopition3" :key="item" :label="item" :value="item"/>
      </el-select>
      <el-select v-model="value4" filterable  placeholder="所属市区" style="margin-left: 3%;margin-right:11%;" @change="change">
        <el-option v-for="item in tableopition1" :key="item" :label="item"  :value="item" />
      </el-select>
      <div class="demo-date-picker" >
      <div class="block">
     <!--  <span class="demonstration" style="color: rgb(168,191,208);"> 选择审批日期:&nbsp; &nbsp; &nbsp; </span> -->
      <el-date-picker
        v-model="datavalue"
        type="daterange"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :shortcuts="shortcuts"
        :size="size"
        @change="change"
      />
      </div>
      </div>

      
    </div>
    <div style="margin-top: 30px; margin-left: 10px">
      <!-- 搜索栏 -->
      <div>
        <el-input v-model="input" placeholder="" style="width: 30%;" />
        <el-button @click="seacrhs"  round   style="border-radius: 0;background-color: rgb(22, 155, 213);color: white;">搜索</el-button>
      </div>
      <div id="maxbox" ref="myRef">
        <div >
          <span @click="clickplay()">
            自定义列表
          </span>
          <div class="selectbox" value="1">
            <input type="checkbox" checked disabled />
            <label>企业名称</label>
          </div>
          <div class="selectbox" value="2">
            <input type="checkbox" checked disabled />
            <label>机构代码</label>
          </div>
          <div class="selectbox" value="3">
            <input type="checkbox" checked id="qyfl"/>
            <label>企业分类</label>
          </div>
          <div class="selectbox" value="4">
            <input type="checkbox" checked id="sshy"/>
            <label>所属行业</label>
          </div>
          <div class="selectbox" value="5">
            <input type="checkbox" checked id="qyfj"/>
            <label>企业分级</label>
          </div>
          <div class="selectbox" value="6">
            <input type="checkbox" checked id="ssqs"/>
            <label>所属区市</label>
          </div>
          <div class="selectbox" value="7">
            <input type="checkbox" checked id="ssjd" />
            <label>所属街道</label>
          </div>
          <div class="selectbox" value="8">
            <input type="checkbox" checked disabled />
            <label>删除状态</label>
          </div>
          <div class="selectbox">
            <input type="checkbox" checked disabled value="9"/>
            <label>申请时间</label>
          </div>
        </div>
      </div>
  
      <el-button
        id="maxbox2"
        @click="exportData"
        type="success"
        style="background-color: rgb(22, 155, 213)"
      >
        导出数据
      </el-button>
    </div>
  
    <div id="maxbox3" style="margin-top: 30px">
      <!-- 表单 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed="left" prop="id2" label="序号" width="80" />
        <el-table-column prop="name" label="企业名称" width="160" />
        <el-table-column prop="organizationCode" label="组织机构代码" width="320" />
        <el-table-column prop="businessClassify" label="企业分类" v-if="l" width="160" />
        <el-table-column prop="industry" label="所属行业" v-if="y" width="160"  />
        <el-table-column prop="enterpriseRating" label="企业分级" v-if="j" width="160" />
        <el-table-column prop="region" label="所属市区" v-if="s" width="160" />
        <el-table-column prop="streetBelong" label="所属街道" v-if="d" width="160" />
        <el-table-column prop="deleteStatus" label="删除状态"  width="160" />
        <el-table-column prop="applicationTime" label="申请时间"  width="180" />
        <el-table-column fixed="right" label="操作" width="160">
          <template #default="scope">
            <el-button link type="primary" size="small"  @click="handleClick(scope)">查看</el-button >
            <el-button link type="primary" size="small" v-memo="hand" @click="handleClicke(scope)">通过</el-button>
            <el-button link type="primary" size="small" v-memo="hands"  @click="handleClicker(scope)">驳回</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page" style="display: flex;justify-content: center;">
      <el-pagination background layout="prev, pager, next" :total="1000" />
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted,onUpdated,watch,watchEffect} from "vue";
  import { useRouter } from 'vue-router'
  import axios from 'axios'
  const router = useRouter();
  /* value1 2 对应v-modole */
  const value1 = ref("");
  const value2 = ref("");
  const value3 = ref("");
  const value4 = ref("");
  const value5 = ref("");
  const input = ref("");
  const a=ref('')
  
    //=====以下3个const是关于日期的
const size = ref<'default' | 'large' | 'small'>('default')
const datavalue= ref('') // 日期的ref
const shortcuts = [
  {
    text: '周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '季',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
  
  
  /* 导出数据 */
  const exportData = function () {};
  
  /* 复选框 */
        const myRef = ref();
        let j:any=ref("true");
        let l:any=ref("true");
        let y:any=ref("true");
        let s:any=ref("true");
        let d:any=ref("true");
  const clickplay = function () {
    if (myRef.value.style.height == '36px' || myRef.value.style.height=='') {
      myRef.value.style.height = "324px"
    }else if(myRef.value.style.height = "324px"){
      myRef.value.style.height = "36px";
    } ;  
      const qyfj:any=document.getElementById("qyfj");
      j.value=qyfj.checked;
      const qyfl:any=document.getElementById("qyfl");
      l.value=qyfl.checked;
      const sshy:any=document.getElementById("sshy");
      y.value=sshy.checked;
      const ssqs:any=document.getElementById("ssqs");
      s.value=ssqs.checked;
      const ssjd:any=document.getElementById("ssjd");
      d.value=ssjd.checked;
  };
  //查看
  const handleClick = (scope:any) => {
      let id=scope.row.id4
      router.push({path:"/ProcessingAndApproval",query:{id:id}})
     //跳转页面传参 approval_checklist/seeApprovalReview   传id
};
  //通过   这两个选项要做个判断，如果选择了其中一项，则两个按钮都要隐藏，
  //同时渲染的时候？？没对，数据里面好像没有状态
  const hand=ref('通过')
  const handleClicke = (scope:any) => {
      let id=scope.row.id4
      console.log(hand.value);
      axios({    
       method: 'post',
       url: 'http://172.16.123.161:8080/approval_checklist/doApprovalReview',
       params: {
       id:id,
       method:hand.value
       }
       }).then((res:any) => {
        tableData.value=res.data.data
        for(let i=0;i<tableData.value.length;i++){
          tableData.value[i].approvalTime=aaa(tableData.value[0].approvalTime)
          tableData.value[i].submissionTime=aaa(tableData.value[0].submissionTime)
          tableData.value[i].applicationTime=aaa(tableData.value[0].applicationTime)
        }
        })
};
  //驳回
  const hands=ref('驳回')
  const handleClicker = (scope:any) => {
      let id=scope.row.id4
      console.log(hands.value);
      axios({    
       method: 'post',
       url: 'http://172.16.123.161:8080/approval_checklist/doApprovalReview',
       params: {
       id:id,
       method:hands.value
       }
       }).then((res:any) => {
        tableData.value=res.data.data
        for(let i=0;i<tableData.value.length;i++){
          tableData.value[i].approvalTime=aaa(tableData.value[0].approvalTime)
          tableData.value[i].submissionTime=aaa(tableData.value[0].submissionTime)
          tableData.value[i].applicationTime=aaa(tableData.value[0].applicationTime)
        }
        })
};


 //这是下拉框动态选项
const tableopition1:any=ref([])
const tableopition2:any=ref([])
const tableopition3:any=ref([])
const tableopition4:any=ref([])


const change=(()=>{
  console.log(value2.value);
  let time= timestampToTime(datavalue.value[0])//开始日期
  let time2=timestampToTime(datavalue.value[1])//结束日期
     axios({    
       method: 'post',
       url: 'http://172.16.123.189:8080/approval_checklist/findApprovalReviewByCondition',
       params: {
       dstatic:value1.value,//删除状态  √
       bclass:value2.value, //企业分级 //企业分类
       industry:value3.value,// 所属行业
       region:value4.value, //√ 所属市区
     //少一个企业分类
       page:1,
       limit:10 ,
       starttime:time,
       endtime:time2,

       }
       }).then((res:any) => {
        tableData.value=res.data.data
        for(let i=0;i<tableData.value.length;i++){
          tableData.value[i].approvalTime=aaa(tableData.value[0].approvalTime)
          tableData.value[i].submissionTime=aaa(tableData.value[0].submissionTime)
          tableData.value[i].applicationTime=aaa(tableData.value[0].applicationTime)
        }
        })
 })
  //搜索发起请求
 const seacrhs=function(){ 
     axios({    
       method: 'post',
       url: 'http://172.16.123.189:8080/approval_checklist/selectshname',
       params: {
        name:input.value,
        currentPage:1,
        pageSize:10    
       }
       }).then((res:any) => {
        console.log('11',res);
        
        tableData.value=res.data.data
        for(let i=0;i<tableData.value.length;i++){
          tableData.value[i].approvalTime=aaa(tableData.value[0].approvalTime)
          tableData.value[i].submissionTime=aaa(tableData.value[0].submissionTime)
          tableData.value[i].applicationTime=aaa(tableData.value[0].applicationTime)
        }
      })
    }  
  //时间戳转换
 const aaa = (aa: any) => {
 var date = new Date(aa); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
 var Y = date.getFullYear() + '/';
 var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
 var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
 var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
 var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
 var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
 return Y + M + D + h + m + s;
 }
 let tableData:any= ref([]);
  //--------------------------国标时间转日期
const timestampToTime=(timestamp:any)=>{
      var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      var D = date.getDate() + ' ';
      var h = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':' ;
      var m = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()) + ':' ;
      var s = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds());
      return Y+M+D+h+m+s;
}

  //onMounted 页面加载前，发起请求渲染页面数据
  onMounted(()=>{
                 axios({
                  method: 'post',
                  url: 'http://1.14.73.59:8080/approval_checklist/findApprovalReview',
                  params: {
                    currentPage:1,
                    pageSize:5    
                  }
                }).then((res:any) => {
                  console.log(res);
                 tableData.value=res.data.data
                  for(let i=0;i<tableData.value.length;i++){
                    tableData.value[i].approvalTime=aaa(tableData.value[0].approvalTime)
                    tableData.value[i].submissionTime=aaa(tableData.value[0].submissionTime)
                    tableData.value[i].applicationTime=aaa(tableData.value[0].applicationTime)
                    tableopition1.value.push(tableData.value[i].region) //所属市区  
                    tableopition2.value.push(tableData.value[i].businessClassify) //企业分类
                    tableopition3.value.push(tableData.value[i].industry) //所属行业
                    tableopition4.value.push(tableData.value[i].deleteStatus) //删除状态
                
                    removeDuplicate(tableopition1.value) //去重，上面const的值都已经去重了
                    removeDuplicate(tableopition2.value)
                    removeDuplicate(tableopition3.value)
                    removeDuplicate(tableopition4.value)  
                     function removeDuplicate(arr:any) {
                      let len = arr.length
                     for (let i = 0; i < len; i++) {
                     for (let j = i + 1; j < len; j++) {
                        if (arr[i] === arr[j]) {
                         arr.splice(j, 1)
                           len-- // 减少循环次数提高性能
                           j-- // 保证j的值自加后不变
                        }
                       }
                      }
                       return arr
                 }
                  }
                })
          });
          
   
  </script>
  
  <style>
  #maxbox {
    position: absolute;
    width: 124px;
    height: 36px;
    right: 600px;
    top: 130px;
    z-index: 999;
    text-align: center;
    line-height: 40px;
    background-color: rgb(22, 155, 213);
    overflow: hidden;
    transition: all 0.2s linear;
    border-radius: 3px;
  }
  #maxbox div {
    width: 123px;
    color: white;
    font-size: 14px;
  }
  #maxbox div div{
    height: 30px;
    width: 122px;
  }
  #maxbox2 {
    width: 120px;
    height: 36px;
    background-color: rgb(22, 155, 213);
    text-align: center;
    line-height: 36px;
    position: absolute;
    right: 400px;
    top: 130px;
  }
  
  /* #clickbox {
    width: 120px;
    height: 36px;
    background-color: rgb(22, 155, 213);
    text-align: center;
    line-height: 36px;
  }
  #checkbox {
    overflow: hidden;
    height: 0px;
  } */
  .selectbox {
    width: 120px;
    height: 20px;
    border: 1px solid rgb(104, 100, 100);
    background-color: rgb(124, 122, 122);
    font-size: 14px;
  }
  .selectbox input{
    margin-left: -10px;
  }
  .selectbox label{
    color:white;
    font-size: 6px;
  }
  </style>